<template>
	<view class="farm">
		<view class="top df">
			<view class="bar">
				<view class="vfor" v-for="(v,i) in tabList" :key="i" @click="tabChange(i)">
					<view class="name" :class="tabIndex == i ? 'active' : ''">{{v.name}}</view>
					<view class="line" v-if="tabIndex == i"></view>
				</view>
			</view>	
		</view>
		<u-transition :show="show">
		<view class="bottom">
			<view class="vfor" v-if="landInfo">
				<view class="title">{{landInfo.landName}}</view>
				<view class="df detail">
					<view class="image">
						<image :src="landInfo.picUrl" mode="" class="image"></image>
					</view>
					<view class="right">
						<view class="com df">
							<view class="tt">认养时间：</view>
							<view class="content">{{landInfo.fosterTime}}</view>
						</view>
						<view class="com df">
							<view class="tt">地块面积：</view>
							<view class="content">{{landInfo.totalArea}}平方</view>
						</view>
						<view class="com df" v-if="tabIndex == 0">
							<view class="tt">剩余面积：</view>
							<view class="content">{{landInfo.notPlantArea}}平方</view>
						</view>
						<view class="btn" v-if="tabIndex == 0" @click="goPlant()">去种植</view>
					</view>
				</view>
				<view class="areaDetail">
					<view class="detailVfor" v-for="(item,index) in landInfo.landMsgS" :key="index" :class="index != landInfo.landMsgS.length-1 ? 'bb' : ''" @click="jumpToManage(item)">
						<view class="name">
						{{item.variety}}
						<view>
							<view class="btnMail" v-if="tabIndex == 2" @click.stop="jumpToMail(item)">邮寄产出物/查看物流</view>
							<view class="btnSuccess" v-if="tabIndex == 2" @click.stop="jumpToAddTask(item)">{{item.landMsgState == 0 ? "待种植":item.landMsgState == 2 ? "去采收":"已采收"}}</view>
							<view class="btnCom" v-if="tabIndex == 1" @click.stop="jumpToManage(item)">管理地块</view>
							<view class="btnSuccess" v-if="tabIndex == 1" @click.stop="jumpToAddTask(item)">{{item.landMsgState == 0 ? "待种植":item.landMsgState == 1 ? "去采收":"已采收"}}</view>
							<view class="btnMail" v-if="tabIndex == 3" @click.stop="jumpToMail(item)">邮寄产出物/查看物流</view>
						</view>
						</view>
						<view class="com df">
							<view class="tt">种植面积：</view>
							<view class="content">{{item.plantArea}}平方</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u--text  bold align="center" type="info" text="暂无数据"></u--text>
			</view>
		</view>
		</u-transition>
	</view>
</template>

<script>
	import {findLandMsgByLandId,addTask} from "@/api/api.js"
	export default {
		data() {
			return {
				show:false,
				tabIndex: '0',
				tabList: [
					{
						name: '待种植'
					},
					{
						name: '待采收'
					},
					{
						name: '部分采收'
					},
					{
						name: '已采收'
					},
				],
				list: [],
				landInfo:{},
				landId:""
			}
		},
		onLoad(option) {
			console.log(option);
			let query = `landId=${option.landId}&status=${this.tabIndex}`
			this.landId = option.landId
			this.getLandInfo(query)
		},
		methods: {
			tabChange(i) {
				this.tabIndex = i
				this.getLandInfo(`landId=${this.landId}&status=${i}`)
			},
			async getLandInfo(query){
				uni.showLoading({
					mask:true
				})
				this.show = false
				const res = await findLandMsgByLandId(query)
				console.log(res);
				if(res?.data.code == 200){
					this.landInfo = res.data.data
					setTimeout(()=>{
						uni.hideLoading()
						this.show = true
					},300)
				}else{
					uni.hideLoading()
					uni.$u.toast(res.data.msg)
				}
			},
			jumpToMail(item){
				uni.navigateTo({
					url:"/pages/user/mailFruit?landMsgId="+item.landMsgId
				})
			},
			jumpToManage(item){
					uni.navigateTo({
						url:'/pages/user/myFarmDetail?landId='+this.landId+'&landMsgId='+item.landMsgId+'&VarietyId='+item.varietyId
					})
			},
			goPlant(){
				uni.navigateTo({
					url:`/pages/user/myFarm?landId=${this.landId}&status=${this.tabIndex}`
				})
			},
			jumpToAddTask(item){
				if(item.landMsgState == 3){
					uni.$u.toast("该地块已采收")
				}else{
					uni.navigateTo({
						url:"/pages/user/addTask?VarietyId="+item.varietyId+"&landMsgId="+item.landMsgId+'&landId='+this.landId
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.farm {
		.df {
			display: flex;
		}
		.top {
			width: 690rpx;
			height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 0 30rpx 30rpx;
			overflow: hidden;
			.bar{
				overflow-x: scroll;
				display: flex;
			}
			.vfor {
				width: 230rpx;
				.name {
					width: 230rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					color: #1D1D1D;
					font-size: 30rpx;
					letter-spacing: 2rpx;
				}
		
				.active {
					color: #17CC77;
					font-size: 32rpx;
					font-weight: bold;
					background: #F4F6F9;
				}
		
				.line {
					margin: auto;
					margin-top: 10rpx;
					width: 190rpx;
					height: 6rpx;
					background: #17CC77;
					border-radius: 10rpx;
				}
			}
		}
		
		

		.bottom {
			padding: 20rpx 30rpx;

			.vfor {
				width: 650rpx;
				// height: 497rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
				padding: 35rpx 20rpx 20rpx;

				.title {
					font-size: 30rpx;
					color: #282828;
					margin-bottom: 42rpx;
					font-weight: bold;
				}

				.detail {
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

					.image {
						width: 290rpx;
						height: 200rpx;
						border-radius: 20rpx;
						margin-right: 26rpx;
					}


					.right {
						padding-top: 23rpx;

						.btn {
							float: right;
							margin-top: 20rpx;
							width: 160rpx;
							height: 56rpx;
							background: #17CC77;
							border-radius: 8rpx;
							border: 2rpx solid #17CC77;
							text-align: center;
							line-height: 56rpx;
							color: #FFFFFF;
						}
					}
				}

				.areaDetail {
					.bb {
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
					}

					.detailVfor {
						padding-top: 20rpx;
						position: relative;

						.name {
							font-size: 30rpx;
							color: #282828;
							margin-bottom: 20rpx;
							display: flex;
							justify-content: space-between;
							view{
								display: flex;
								flex-wrap: nowrap;
								.btnSuccess {
									padding:0 10rpx;
									height: 56rpx;
									background: #17CC77;
									border-radius: 8rpx;
									// border: 2rpx solid #17CC77;
									text-align: center;
									line-height: 56rpx;
									color: #FFFFFF;
									font-size: 28rpx;
								}
								
								.btnMail {
									padding:0 10rpx;
									height: 56rpx;
									margin-left: 16rpx;
									background: rgba(23, 204, 119, 0.06);
									border-radius: 8rpx;
									border: 2rpx solid #17CC77;
									text-align: center;
									line-height: 56rpx;
									color: #17CC77;
									font-size: 28rpx;
									margin-right: 16rpx;
								}
								.btnCom {
									padding:0 10rpx;
									height: 56rpx;
									margin-left: 16rpx;
									background: rgba(23, 204, 119, 0.06);
									border-radius: 8rpx;
									border: 2rpx solid #17CC77;
									text-align: center;
									line-height: 56rpx;
									color: #17CC77;
									font-size: 28rpx;
									margin-right: 16rpx;
								}
							}
							
						}

						
					}
				}

				.com {
					font-size: 26rpx;
					margin-bottom: 20rpx;

					.tt {
						color: rgba(68, 78, 104, 0.7);
						white-space: nowrap;
						width: 130rpx;
					}

					.content {
						color: #1D1D1D;
						text-align: left;
					}
				}
			}
		}
	}
</style>